<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>outline 与 border 的区别</title>
    <style>
        div{
            border: medium solid dodgerblue;
            margin: 10px;
            padding: 10px;
        }
        #out{
            outline: medium dashed deeppink;
        }
    </style>
    <script>
        function show(){
            var elem = document.getElementById("out");
            var elem2 = document.getElementById("in");
            alert("out width: " + elem.clientWidth + "\n in width: " + elem2.clientWidth);
        }
    </script>
</head>
<body>
    <div id="out">
        out
    </div>
    <div id="in">
        in
    </div>
    <button type="button" onclick="show()">show</button>
    
</body>